<template>
  <div class="login-wrap">
    <div class="ms-login">
      <div class="ms-title">SrUrl后台</div>
      <a-form :model="loginForm" class="ms-content">
        <a-form-item prop="username" :hide-label="true">
          <a-input
            v-model="loginForm.username"
            placeholder="请输入用户名"
            style="width: 100%"
          >
            <template #prefix>
              <icon-user />
            </template>
          </a-input>
        </a-form-item>
        <a-form-item prop="password" :hide-label="true">
          <a-input
            type="password"
            placeholder="请输入密码"
            style="width: 100%"
            v-model="loginForm.password"
            @keyup.enter="submitForm"
          >
            <template #prefix>
              <icon-lock />
            </template>
          </a-input>
        </a-form-item>
        <div class="login-btn">
          <a-button type="primary" @click="submitForm">登录</a-button>
        </div>
      </a-form>
    </div>
  </div>
</template>

<script setup name="login">
import { ref } from 'vue'
import { IconUser, IconLock } from '@arco-design/web-vue/es/icon'
import { login } from '@/api/login'
import { Message } from '@arco-design/web-vue'
import cache from '@/util/cache'
import { useRouter } from 'vue-router'
import { encrypt } from '@/util/rsa-util'

const router = useRouter()

const loginForm = ref({
  username: '',
  password: ''
})

const submitForm = () => {
  const form = { ...loginForm.value }
  if (!form.username || !form.password) {
    Message.error('用户名或密码不能为空！')
  }
  form.password = encrypt(form.password)
  login(form).then((res) => {
    const token = res.data.token
    const expireTime = res.data.expireTime
    const userId = res.data.userId
    const username = res.data.username

    cache.local.set('token', `Bearer ${token}`)
    cache.local.set('expireTime', expireTime)
    cache.local.set('userId', userId)
    cache.local.set('username', username)

    router.push('/dashboard')
  })
}
</script>

<style scoped lang="less">
.login-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url(../../assets/img/login-bg.jpg);
  background-size: 100%;
}
.ms-title {
  width: 100%;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
  color: #fff;
  border-bottom: 1px solid #ddd;
}
.ms-login {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 350px;
  margin: -190px 0 0 -175px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.3);
  overflow: hidden;
}
.ms-content {
  padding: 30px 30px;
}
.login-btn {
  text-align: center;
}
.login-btn button {
  width: 100%;
  height: 36px;
  margin-bottom: 10px;
}
.login-tips {
  font-size: 12px;
  line-height: 30px;
  color: #fff;
}
</style>
